<!--  -->
<template>
  <div ref="wrapper" class="wrapper"> 
    <div class="content"><slot></slot></div>
</div>
</template>

<script>
import BScroll from 'better-scroll' 

export default {
  data () {
    return {
        scroll: null
    };
  },
  props: {
      data: Array, // 用来监听数据有变化的时候refresh
      probeType: {
          type: Number,
          default: 0 // 0和 1 都不侦测 2和3 侦测  3同时监听惯性滚动
      },
    /* 是否派发上拉加载更多的事件 */
      pullUp: {
          type: Boolean,
          default: false
      },
      pullUping: {  // 上拉回调
          type: Function,
          default: null
      },
       /** * 是否派发顶部下拉的事件，用于下拉刷新 */
      pulldown: {
        type: Boolean,
        default: false
      },
      pulldowning: { // 下拉回调
        type: Function,
        default: null
      },
   
  },
  mounted(){
      this.$nextTick(() => {
          this.scroll = new BScroll(this.$refs.wrapper, {
              probeType: this.probeType,
              click: true, // div点击
              pullUpLoad: this.pullUp, // 监听滚动到底部
              pullDownRefresh: !this.pulldown ? false : {
                threshold: 50,
                stop: 20
               }
          } )

          if(this.probeType === 3){
           this.scroll.on('scroll', (position) => {
                  this.$emit('scroll',position) // 滚动坐标
              })   
              this.scroll.on("scrollEnd",(position) => {
                this.$emit('scrollEnd',position); // 滚动停止事件
              })
          }
          

          if(this.pullUp){
              this.scroll.on('pullingUp', () => {
                    this.pullUping(this.finishPullUp)
              })
          }

          if (this.pulldown) { // 下拉刷新
                this.scroll.on('pullingDown', () => {
                    this.pulldowning(this.finishPullDown)
                })
            }
      })
  },
  watch: {
      data:() => {
          this.refresh();
      }
  },
  components: {

  },

  computed: {},

  methods: {
      refresh(){
          setTimeout(()=>{
              this.scroll.refresh();
          },20)
      },
      scrollTo(x,y, time=300) {
        // 代理better-scroll的scrollTo方法
        this.scroll && this.scroll.scrollTo(x,y,time)
      },
    //   el 表示 dom 元素
      scrollToElement(el, time = 300) {
        // 代理better-scroll的scrollToElement方法
        this.scroll && this.scroll.scrollToElement(el, time)
      },
      finishPullUp(){
          this.scroll && this.scroll.finishPullUp();// 需要 在滚动到底部时
      },
      finishPullDown(){
        this.scroll && this.scroll.finishPullDown();
      },
      stop(){
        this.scroll && this.scroll.stop()
      }

  }
}

</script>
<style  scoped>
    .wrapper {
        /* height: 200px; */
        /* overflow: hidden; */
    }
</style>